<template>
  <div class="articleClass">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span class="text">文章分类</span>
            <el-button  class="addButton" @click="openDialog('add')">添加分类</el-button>
        </div>
        <el-dialog
            :title="DirlogTitle"
            :visible.sync="dialogVisible"
            :before-close="handleClose">
            <el-form>
              <div v-if="dialogType==='del'">
                <el-form-item>
                  <span>确定要删除本条信息吗？</span>
                </el-form-item>
              </div>
              <div v-else>
                <el-form-item label="分类名称:" >
                  <el-input v-model="form.cate_name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="分类别名:">
                  <el-input v-model="form.cate_alias" placeholder="请输入别名"></el-input>
                </el-form-item>
              </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false" class="cancelButton">取 消</el-button>
              <el-button class="otherButton" :class="{long:dialogType!=='add'}" @click="work">{{DirlogButton}}</el-button>
              <!-- dialogFormVisible = false -->
            </div>
        </el-dialog>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            type="index"
            label="序号"
            width="130">
            </el-table-column>
            <el-table-column
            prop="cate_name"
            label="项目名称"
            width="420">
            </el-table-column>
            <el-table-column
            prop="cate_alias"
            label="分类别名"
            width="350">
            </el-table-column>
            <el-table-column
            label="操作"
            width="166">
            <template slot-scope="scope">
                <el-button
                size="mini"
                type="primary"
                @click="openDialog('change',scope.row.id)">修改</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="openDialog('del',scope.row.id)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
    </el-card>
  </div>
</template>

<script>
import { InitClass, getClass, addClass, delClass, changeClass } from '@/api/other'
// import { InitClass, getClass } from '@/api/other'
export default {
  data () {
    return {
      dialogVisible: false,
      dialogType: 'add', // 默认是添加框
      tableData: [],
      form: {
        cate_name: '',
        cate_alias: '',
        id: ''
      }
    }
  },
  methods: {
    // 渲染数据
    async InitClassAction () {
      try {
        const res = await InitClass()
        // 等有数据时候使用
        this.tableData = res.data
      } catch (e) {
        console.log(e)
      }
    },
    // 弹出提示框
    async openDialog (type, id) {
      this.dialogType = type
      if (this.dialogType === 'change' || this.dialogType === 'del') {
        const res = await getClass(id)
        this.form.cate_name = res.data.cate_name
        this.form.cate_alias = res.data.cate_alias
        this.form.id = id
      }
      // 正确渲染,显示弹框
      this.dialogVisible = true
    },
    // 操作弹窗数据
    async work () {
      if (this.dialogType === 'add') {
        if (!(this.form.cate_name && this.form.cate_alias)) {
          alert('错了')
          return
        }
        await addClass(this.form.cate_name, this.form.cate_alias)
      } else if (this.dialogType === 'change') {
        console.log('点了', this.dialogType)
        if (this.form.id === 0 || this.form.id === 1) {
          alert('不能修改')
          return
        }
        await changeClass(this.form.cate_name, this.form.cate_alias, this.form.id)
      } else if (this.dialogType === 'del') {
        console.log('点了', this.dialogType)
        if (this.form.id === 0 || this.form.id === 1) {
          alert('不能删除')
          return
        }
        await delClass(this.form.id)
      }
      // 数据更新后刷新界面，关闭弹窗
      this.dialogVisible = false
      this.InitClassAction()
    },
    // 关闭弹出框
    handleClose (done) {
      this.form = {
        cate_name: '',
        cate_alias: '',
        id: ''
      }
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  },
  created () {
    this.InitClassAction()
  },
  computed: {
    DirlogTitle () {
      let title = '标题'
      if (this.dialogType === 'add') {
        title = '添加分类'
      } else if (this.dialogType === 'change') {
        title = '修改文章分类'
      } else if (this.dialogType === 'del') {
        title = '提示'
      }
      return title
    },
    DirlogButton () {
      let button = ''
      if (this.dialogType === 'add') {
        button = '添加'
      } else if (this.dialogType === 'change') {
        button = '确认修改'
      } else if (this.dialogType === 'del') {
        button = '确认删除'
      }
      return button
    }
  }
}
</script>

<style lang='scss' scoped>
  .box-card {
    width: 1126px;
    .item {
        margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    //修改卡片头部样式
    ::v-deep .el-card__header{
      padding: 18px 30px;
      height: 68px;
      .text {
        font-size: 16px;
        margin: 5px 0;
        font-weight: 600;
      }
      .addButton{
        float: right;
        padding: 5px 16px;
        height: 32px;
        background: #4F81FF;
        color:#FFF;
        font-size: 16px;
        cursor: pointer;
        &:hover{
          background: #608DFF
        }
      }
    }
    // 修改单元格左侧padding
    ::v-deep .el-table th.el-table__cell ,
    ::v-deep .el-table td.el-table__cell {
       padding-left: 14px;
       height: 42px;
    }

    // 修改表头字体颜色
    ::v-deep .el-table th.el-table__cell{
        color: rgba($color: #000000, $alpha: 0.4);
    }
    // 修改内容字体颜色
    ::v-deep .el-table td.el-table__cell{
        color: rgba($color: #131523, $alpha: 0.9);
    }
    // 修改弹出框样式
    ::v-deep .el-dialog{
      width: 410px;
      .el-dialog__headerbtn .el-dialog__close {
          color: #515151;
          &:hover{
            color: #9a9a9a;
          }
      }
      .el-dialog__body{
        padding: 0;
        .el-form-item{
          display: flex;
          justify-content: space-between;
          height: 32px;
          .el-input__inner{
            flex: 1;
            width: 280px;
            height: 32px;
          }
        }
      }
      .cancelButton,.otherButton{
        padding: 5px 16px;
        width: 60px;
        height: 32px;
      }
      .cancelButton{
        background-color: #eee;
        color: #000;
      }
      .otherButton{
        background-color:#4F81FF;
        color: #fff;
        &.long{
          width: 88px;
        }
      }

    }

  }
</style>
